$(function(){
    // 需求:点击change 切换登录内容
    $('.login-top .change').click(function(){
        // 切换激活样式
        // console.log($('.change'));
        $(this).addClass('active').siblings().removeClass('active')
        // 切换内容
        let index = $(this).index()
        // console.log(index);
        $('.content .cent').eq(index).addClass('on').siblings().removeClass('on')
    })
    // 需求: 输入用户名或密码时,判断用户名长度: 如果长度大于0,显示图标(login-x), 否则就隐藏
    $('.user , .pwd').keyup(function(){
        let len = $(this).val().length;
        if(len > 0){
            // 边框颜色
            $(this).closest('.input-p').css('border','1px solid black')
            // 图标显示
            $(this).next('.login-x').css('display','block')
            // 提示
            $(this).closest('.input-p').next('.input-ts').css('color','#333')
        }else{
            $(this).closest('.input-p').css('border','1px solid #bfbfbf')
            $(this).next('.login-x').css('display','none')
            $(this).closest('.input-p').next('.input-ts').css('color','#fff')
        }
    })
    // 点击删除图标, 清空用户名或密码, 隐藏删除图标
    $('.login-x').click(function(){
        $(this).prev('.input-text').val('')
        $(this).prev('.input-txt').css('display','none')
        $(this).closest('.input-p').css('border','1px solid #bfbfbf')
        $(this).closest('.input-p').next('.input-ts').css('color','#fff')

    })
})